<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录系统</title>
    <link href="css/login.css" rel="stylesheet">
    <style>
        body {
            background-image: url("./imgs/Desert1.jpg") ;
        }
    </style>

    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>

<body>
    <div id="loginDiv">
        <form action="/loginServlet" id="form">
            <h1 id="loginMsg">广外学生管理系统</h1>


            <span id="username_err" class="login_msg" style="display: none">用户名或者密码不正确</span>

            <p>用户名:<input id="username" name="username" type="text"></p>

            <p>密　码:<input id="password" name="password" type="password"></p>

            <p>记　住:<input id="remember" name="remember" value="1" type="checkbox"></p>

            <div id="subDiv">
                <input type="submit" class="button" @click="login" value="登陆">
                <input type="reset" class="button" value="重置">&nbsp;&nbsp;&nbsp;
                <a href="register.jsp">没有账号？点击注册</a>
            </div>
        </form>
    </div>

</body>

<script>
    new Vue({
        el: "#loginDiv",
        methods: {
            login() {
                axios.post("http://localhost/loginServlet", this.brand).then((resp) => {
                    console.log(resp.data);

                    if (resp.data == "fail") {
                        this.$message({
                            message: '登陆失败,密码或者用户名错误',
                            type: 'error'
                        });
                    } else {}
                })
            }
        },
        data() {
            return {

            }
        }
    })
</script>

</html>